<div class="biz-content">
    <div class="biz-top-bar">
        <div class="biz-app-instance-title">
            <i class="bk-icon icon-arrows-left back" @click="goAppList"></i>
            <span style="cursor: default;">{{instanceInfo.name}}</span>
        </div>
        <div class="biz-app-instance-actions">
            <bk-button type="primary" title="to yaml" icon="angle-double-left" @click="toYaml">
                to yaml
            </bk-button>
        </div>
    </div>
    <div class="biz-content-wrapper biz-app-instance">
        <app-exception v-if="exceptionCode" :type="exceptionCode.code" :text="exceptionCode.msg"></app-exception>
        <div v-else class="biz-app-instance-wrapper">
            <div class="biz-app-instance-header" v-bkloading="{isLoading: instanceInfoLoading}">
                <div class="header-item">
                    <div class="key-label">应用名称：</div>
                    <bk-tooltip :delay="500" :content="instanceInfo.name" placement="bottom">
                        <div class="value-label">{{instanceInfo.name}}</div>
                    </bk-tooltip>
                </div>
                <div class="header-item">
                    <div class="key-label">创建时间：</div>
                    <div class="value-label">{{instanceInfo.createTime}}</div>
                </div>
                <div class="header-item">
                    <div class="key-label">更新时间：</div>
                    <div class="value-label">{{instanceInfo.updateTime}}</div>
                </div>
                <div class="header-item">
                    <div class="key-label">所在命名空间：</div>
                    <bk-tooltip :delay="500" :content="instanceInfo.namespace_name" placement="bottom">
                        <div class="value-label">{{instanceInfo.namespace_name}}</div>
                    </bk-tooltip>
                </div>
                <div class="header-item">
                    <div class="key-label">所属集群：</div>
                    <bk-tooltip :delay="500" :content="instanceInfo.cluster_name" placement="bottom">
                        <div class="value-label">{{instanceInfo.cluster_name}}</div>
                    </bk-tooltip>
                </div>
            </div>
            <div class="biz-app-instance-chart-wrapper">
                <div class="biz-app-instance-chart">
                    <div class="part top-left">
                        <div class="info">
                            <div class="left">CPU使用率</div>
                        </div>
                        <chart :options="cpuLine" ref="instanceCpuLine" auto-resize></chart>
                    </div>
                    <div class="part top-right">
                        <div class="info">
                            <div class="left">内存</div>
                        </div>
                        <chart :options="memLine" ref="instanceMemLine" auto-resize></chart>
                    </div>
                </div>
            </div>
            <div class="biz-app-instance-table-wrapper">
                <bk-tab :type="'fill'" :active-name="tabActiveName" @tab-changed="tabChanged">
                    <bk-tabpanel name="taskgroup" title="Pod管理">
                        <div v-bkloading="{isLoading: taskgroupLoading}">
                            <div class="biz-app-instance-taskgroup-data" v-if="taskgroupList.length">
                                <div class="taskgroup-item-wrapper" v-for="(taskgroup, index) in taskgroupList" :key="index">
                                    <div class="taskgroup-item">
                                        <div class="name">
                                            <template v-if="taskgroup.status !== 'Starting'">
                                                <span @click.stop="toggleContainers(taskgroup, index)">
                                                    <i style="position: relative; top: -4px;" class="bk-icon toggle" :class="taskgroup.isOpen ? 'icon-minus' : 'icon-plus'"></i>
                                                </span>
                                            </template>
                                            <template v-else>
                                                <span>
                                                    <i style="cursor: not-allowed;position: relative; top: -4px;" class="bk-icon toggle" :class="taskgroup.isOpen ? 'icon-minus' : 'icon-plus'"></i>
                                                </span>
                                            </template>
                                            <bk-tooltip :delay="500" placement="top" :transfer="true">
                                                <template v-if="taskgroup.status !== 'Starting'">
                                                    <span class="name-info" @click="showTaskgroupInfo(taskgroup, index)">{{taskgroup.name.substring(0, 70)}}</span>
                                                </template>
                                                <template v-else>
                                                    <span class="name-info" style="cursor: not-allowed;color: #c3cdd7 !important;">{{taskgroup.name.substring(0, 70)}}</span>
                                                </template>
                                                <template slot="content">
                                                    <p style="text-align: left; white-space: normal;word-break: break-all;font-weight: 400;">
                                                        {{taskgroup.name || '--'}}
                                                    </p>
                                                </template>
                                            </bk-tooltip>
                                        </div>
                                        <div class="status">
                                            <div style="margin-bottom: 6px;">状态：</div>
                                            <template v-if="taskgroup.status !== 'Running'">
                                                <div class="value-label" style="color: #ff5656;">
                                                    <bk-tooltip placement="top" :delay="500" :transfer="true">
                                                        <i class="bk-icon icon-info-circle" style="font-size: 16px;color: #ff5656;position: relative;top: 3px;"></i>
                                                        {{`${taskgroup.status}${taskgroup.reason ? ':' + taskgroup.reason : ''}`}}
                                                        <template slot="content">
                                                            <p style="text-align: left; white-space: normal;word-break: break-word;font-weight:400;">{{taskgroup.message || '异常'}}</p>
                                                        </template>
                                                    </bk-tooltip>
                                                </div>
                                            </template>
                                            <template v-else>
                                                <div class="value-label" style="color: #34d97b;">
                                                    {{taskgroup.status || '--'}}
                                                </div>
                                            </template>
                                        </div>
                                        <div class="host-ip">
                                            <div style="margin-bottom: 6px;">Host IP：</div>
                                            <div class="value-label">{{taskgroup.host_ip || '--'}}</div>
                                        </div>
                                        <div class="pod-ip">
                                            <div style="margin-bottom: 6px;">Pod IP：</div>
                                            <div class="value-label">{{taskgroup.podIP || '--'}}</div>
                                        </div>
                                        <div class="survive-time">
                                            <div style="margin-bottom: 6px;">存活时间：</div>
                                            <template v-if="taskgroup.status === 'Staging'
                                                || taskgroup.status === 'Error'
                                                || taskgroup.status === 'Failed'
                                                || taskgroup.status === 'Lost'">
                                                <div class="value-label">--</div>
                                            </template>
                                            <template v-else>
                                                <div class="value-label">{{taskgroup.surviveTime || '--'}}</div>
                                            </template>
                                        </div>
                                        <div class="act">
                                            <a href="javascript:void(0);" class="bk-text-button"
                                                v-if="taskgroup.status !== 'Starting'"
                                                @click="rescheduler(taskgroup, index)">
                                                重新调度
                                            </a>
                                            <a href="javascript:void(0);" class="bk-text-button is-disabled" v-else>
                                                重新调度
                                            </a>
                                        </div>
                                    </div>
                                    <div class="taskgroup-container-table" v-if="taskgroup.isOpen">
                                        <table class="bk-table has-table-hover biz-table" style="overflow: hidden;" v-bkloading="{isLoading: taskgroup.containerLoading}">
                                            <tbody>
                                                <template v-if="taskgroup.containerList.length">
                                                    <tr v-for="(container, containerIndex) in taskgroup.containerList">
                                                        <td style="text-align: left; padding-left: 23px; font-weight: 700; width: 350px;">
                                                            <template v-if="container.container_id">
                                                                <bk-tooltip placement="top" :delay="500" :transfer="true">
                                                                    <a href="javascript:void(0);" class="bk-text-button name"
                                                                        @click="goContainerDetail(taskgroup, container)">
                                                                        {{container.name}}
                                                                    </a>
                                                                    <template slot="content">
                                                                        <p style="text-align: left; white-space: normal;word-break: break-all;font-weight: 400;">{{container.name}}</p>
                                                                    </template>
                                                                </bk-tooltip>
                                                            </template>
                                                            <template v-else>
                                                                <bk-tooltip placement="top" :delay="500" :transfer="true">
                                                                    <a href="javascript:void(0);" class="bk-text-button is-disabled name">
                                                                        {{container.name}}
                                                                    </a>
                                                                    <template slot="content">
                                                                        <p style="text-align: left; white-space: normal;word-break: break-all;font-weight: 400;">{{container.name}}</p>
                                                                    </template>
                                                                </bk-tooltip>
                                                            </template>
                                                        </td>
                                                        <td style="width: 300px;">
                                                            <template v-if="container.status !== 'running'">
                                                                <div style="color: #ff5656;">
                                                                    <bk-tooltip placement="top" :delay="500" :transfer="true">
                                                                        <i class="bk-icon icon-info-circle" style="font-size: 16px;color: #ff5656;position: relative;top: 3px;"></i>
                                                                        {{`${container.status}${container.reason ? ':' + container.reason : ''}`}}
                                                                        <template slot="content">
                                                                            <p style="text-align: left; white-space: normal;word-break: break-word;font-weight:400;">{{container.messsage || '异常'}}</p>
                                                                        </template>
                                                                    </bk-tooltip>
                                                                </div>
                                                            </template>
                                                            <template v-else>
                                                                <div style="color: #34d97b;">
                                                                    {{container.status || '--'}}
                                                                </div>
                                                            </template>
                                                        </td>
                                                        <td style="width: 450px">
                                                            <bk-tooltip placement="top" :delay="500" :transfer="true">
                                                                <p class="image">{{container.image}}</p>
                                                                <template slot="content">
                                                                    <p style="text-align: left; white-space: normal;word-break: break-all;">{{container.image}}</p>
                                                                </template>
                                                            </bk-tooltip>
                                                        </td>
                                                        <td class="act" style="width: 250px;">
                                                            <template v-if="container.status === 'running'">
                                                                <a href="javascript:void(0);" class="bk-text-button" @click="showTerminal(container)">
                                                                    WebConsole
                                                                </a>
                                                            </template>
                                                            <template v-else>
                                                                <bk-tooltip content="容器状态不是Running" placement="right">
                                                                    <a href="javascript: void(0);" class="bk-text-button is-disabled mr5">WebConsole</a>
                                                                </bk-tooltip>
                                                            </template>
                                                        </td>
                                                    </tr>
                                                </template>
                                                <template v-else>
                                                    <tr>
                                                        <td colspan="4">
                                                            <div class="bk-message-box">
                                                                <p class="message empty-message" v-if="!taskgroup.containerLoading">无数据</p>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                </template>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                            <div class="biz-app-instance-taskgroup-data" v-else>
                                <div class="bk-message-box">
                                    <p class="message empty-message" v-if="!taskgroupLoading">无数据</p>
                                </div>
                            </div>
                        </div>
                    </bk-tabpanel>
                    <bk-tabpanel name="event" title="事件">
                        <div v-bkloading="{isLoading: eventListLoading}">
                            <table class="bk-table has-table-hover biz-table biz-app-instance-event-table">
                                <thead>
                                    <tr>
                                        <th style="text-align: left;padding-left: 27px; width: 200px">
                                            时间
                                        </th>
                                        <th style="width: 260px">组件</th>
                                        <th style="width: 260px">对象及级别</th>
                                        <th style="width: 260px">事件内容</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <template v-if="eventList.length">
                                        <tr v-for="(event, index) in eventList">
                                            <td style="text-align: left;padding-left: 27px;">
                                                {{event.eventTime}}
                                            </td>
                                            <td>{{event.component}}</td>
                                            <td>
                                                <p>{{event.obj}}</p>
                                                <p>{{event.level}}</p>
                                            </td>
                                            <td>{{event.describe}}</td>
                                        </tr>
                                    </template>
                                    <template v-else>
                                        <tr>
                                            <td colspan="4">
                                                <div class="bk-message-box no-data">
                                                    <p class="message empty-message" v-if="!eventListLoading">无数据</p>
                                                </div>
                                            </td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>
                        <div class="biz-page-wrapper" v-if="eventPageConf.total">
                            <bk-page-counter
                                :total="eventPageConf.total"
                                :page-size="eventPageConf.pageSize"
                                @change="changePageSize">
                            </bk-page-counter>
                            <bk-paging
                                :size="'small'"
                                :cur-page.sync="eventPageConf.curPage"
                                :total-page="eventPageConf.totalPage"
                                @page-change="eventPageChange">
                            </bk-paging>
                        </div>
                    </bk-tabpanel>
                    <bk-tabpanel name="label" title="标签">
                        <div v-bkloading="{isLoading: labelListLoading}">
                            <table class="bk-table has-table-hover biz-table biz-app-instance-label-table">
                                <thead>
                                    <tr>
                                        <th style="text-align: left;padding-left: 27px; width: 200px">
                                            键
                                        </th>
                                        <th style="width: 260px">值</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <template v-if="labelList.length">
                                        <tr v-for="(label, index) in labelList">
                                            <td style="text-align: left;padding-left: 27px;">
                                                {{label.key}}
                                            </td>
                                            <td>{{label.val}}</td>
                                        </tr>
                                    </template>
                                    <template v-else>
                                        <tr>
                                            <td colspan="2">
                                                <div class="bk-message-box no-data">
                                                    <p class="message empty-message" v-if="!labelListLoading">无数据</p>
                                                </div>
                                            </td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>
                    </bk-tabpanel>
                    <bk-tabpanel name="annotation" title="备注">
                        <div v-bkloading="{isLoading: annotationListLoading}">
                            <table class="bk-table has-table-hover biz-table biz-app-instance-annotation-table">
                                <thead>
                                    <tr>
                                        <th style="text-align: left;padding-left: 27px; width: 200px">
                                            键
                                        </th>
                                        <th style="width: 260px">值</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <template v-if="annotationList.length">
                                        <tr v-for="(annotation, index) in annotationList">
                                            <td style="text-align: left;padding-left: 27px;">
                                                {{annotation.key}}
                                            </td>
                                            <td style="word-break: break-all;">{{annotation.val}}</td>
                                        </tr>
                                    </template>
                                    <template v-else>
                                        <tr>
                                            <td colspan="2">
                                                <div class="bk-message-box no-data">
                                                    <p class="message empty-message" v-if="!annotationListLoading">无数据</p>
                                                </div>
                                            </td>
                                        </tr>
                                    </template>
                                </tbody>
                            </table>
                        </div>
                    </bk-tabpanel>
                </bk-tab>
            </div>
        </div>
    </div>

    <bk-sideslider
        :is-show.sync="logSideDialogConf.isShow"
        :title="' '"
        :width="logSideDialogConf.width"
        @hidden="closeLog"
        class="biz-app-container-log-sideslider"
        :quick-close="true">
        <div class="p20" slot="content" style="position: relative;">
            <bk-tooltip class="refresh-tooltip" :content="'刷新'" :delay="500" placement="bottom">
                <button class="bk-button bk-default is-outline is-icon" @click="refreshLog">
                    <i class="bk-icon icon-refresh"></i>
                </button>
            </bk-tooltip>
            <bk-tooltip class="title-tooltip" :delay="500" placement="bottom">
                <p class="title">{{logSideDialogConf.title}}</p>
                <template slot="content">
                    <p style="text-align: left; white-space: normal;word-break: break-all;font-weight: 400;">
                        {{logSideDialogConf.title}}
                    </p>
                </template>
            </bk-tooltip>
            <template v-if="!logList.length && !logLoading">
                <div style="margin: 0 0 5px 0; text-align: center;">
                    暂无日志信息
                </div>
            </template>
            <template v-else>
                <div class="biz-log-box">
                    <div style="margin: 10px 0px 15px 0px; font-size: 10px;" v-if="logLoading">
                        <div class="bk-spin-loading bk-spin-loading-small bk-spin-loading-primary">
                            <div class="rotate rotate1"></div>
                            <div class="rotate rotate2"></div>
                            <div class="rotate rotate3"></div>
                            <div class="rotate rotate4"></div>
                            <div class="rotate rotate5"></div>
                            <div class="rotate rotate6"></div>
                            <div class="rotate rotate7"></div>
                            <div class="rotate rotate8"></div>
                        </div>
                        正在加载中...
                    </div>
                    <div class="operation-item" v-for="(log, index) in logList">
                        <p class="log-message">
                            {{log}}
                        </p>
                    </div>
                </div>
            </template>
        </div>
    </bk-sideslider>

    <bk-sideslider
        :is-show.sync="toJsonDialogConf.isShow"
        :title="toJsonDialogConf.title"
        :width="toJsonDialogConf.width"
        class="biz-app-container-tojson-sideslider"
        @hidden="closeToJson"
        :quick-close="true">
        <div slot="content" style="position: relative;">
            <div class="biz-log-box" :style="{height: `${winHeight - 60}px`}" v-bkloading="{isLoading: toJsonDialogConf.loading}">
                <div class="copy-code" title="复制代码">
                    <bk-button class="copy-code-btn" :data-clipboard-text="copyContent" type="default" :size="'small'">复制</bk-button>
                </div>
                <div class="code-fullscreen" title="全屏"
                    @click="setFullScreen">
                    <i class="bk-icon icon-full-screen"></i>
                </div>
                <ace
                    :value="editorConfig.value"
                    :width="editorConfig.width"
                    :height="editorConfig.height"
                    :lang="editorConfig.lang"
                    :read-only="editorConfig.readOnly"
                    :full-screen="editorConfig.fullScreen"
                    @init="editorInitAfter">
                </ace>
            </div>
        </div>
    </bk-sideslider>

    <bk-sideslider
        :is-show.sync="taskgroupInfoDialogConf.isShow"
        :title="taskgroupInfoDialogConf.title"
        :width="taskgroupInfoDialogConf.width"
        class="biz-app-container-taskgroup-sideslider"
        @hidden="closeToJson"
        :quick-close="true">
        <div slot="content" style="position: relative;">
            <div class="biz-log-box" :style="{height: `${winHeight - 60}px`}" style="padding-top: 40px;"
                v-bkloading="{isLoading: taskgroupInfoDialogConf.loading}">
                <div class="base-info" v-if="Object.keys(baseData).length">
                    <div class="title">
                        基础信息：
                    </div>
                    <div class="data-wrapper">
                        <div class="data-inner">
                            <div class="left">
                                <div class="label">状态</div>
                                <div class="value" :title="baseData.status">
                                    {{baseData.status || '--'}}
                                </div>
                            </div>
                            <div class="right">
                                <div class="label">上次状态</div>
                                <div class="value" :title="baseData.last_status">{{baseData.last_status || '--'}}</div>
                            </div>
                        </div>
                        <div class="data-inner">
                            <div class="left">
                                <div class="label">命名空间</div>
                                <div class="value" :title="baseData.namespace">{{baseData.namespace || '--'}}</div>
                            </div>
                            <div class="right">
                                <div class="label">RcName</div>
                                <div class="value" :title="baseData.rc_name">{{baseData.rc_name || '--'}}</div>
                            </div>
                        </div>
                        <div class="data-inner">
                            <div class="left">
                                <div class="label">Pod IP</div>
                                <div class="value" :title="baseData.pod_ip">{{baseData.pod_ip || '--'}}</div>
                            </div>
                            <div class="right">
                                <div class="label">最后更新</div>
                                <div class="value" :title="baseData.lastUpdateTime">{{baseData.lastUpdateTime || '--'}}</div>
                            </div>
                        </div>
                        <div class="data-inner">
                            <div class="left">
                                <div class="label">创建时间</div>
                                <div class="value" :title="baseData.createTime">{{baseData.createTime || '--'}}</div>
                            </div>
                            <div class="right">
                                <div class="label">存活时间</div>
                                <div class="value" :title="baseData.surviveTime">{{baseData.surviveTime || '--'}}</div>
                            </div>
                        </div>
                        <div class="data-inner">
                            <div class="merge">
                                <div class="label">信息</div>
                                <div class="value" :title="baseData.message">{{baseData.message || '--'}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="restart-info" v-if="restartData">
                    <div class="title">
                        重启策略：
                    </div>
                    <div class="data-wrapper">
                        <div class="data-inner">
                            <div class="left">
                                <div class="label">重启策略</div>
                                <div class="value" :title="restartData">{{restartData || '--'}}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="restart-info" v-if="killData">
                    <div class="title">
                        Kill策略：
                    </div>
                    <div class="data-wrapper">
                        <div class="data-inner">
                            <div class="left">
                                <div class="label">宽限期</div>
                                <div class="value" :title="`${killData || '--'}秒`">{{killData || '--'}}秒</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="update-info" v-if="Object.keys(updateData).length">
                    <div class="title">
                        升级信息：
                    </div>
                    <div class="data-wrapper">
                        <div class="data-inner">
                            <div class="left">
                                <div class="label">升级类型</div>
                                <div class="value" :title="updateData.type === 'RollingUpdate' ? '滚动升级' : (updateData.type ? updateData.type : '--')">
                                    {{updateData.type === 'RollingUpdate' ? '滚动升级' : (updateData.type ? updateData.type : '--')}}
                                </div>
                            </div>
                            <div class="right">
                                <div class="label">maxUnavailable</div>
                                <div class="value" :title="`${updateData.maxUnavailable}`"
                                    v-if="updateData.maxUnavailable !== null && updateData.maxUnavailable !== undefined">
                                    {{updateData.maxUnavailable}}
                                </div>
                                <div class="value" v-else>
                                    --
                                </div>
                            </div>
                        </div>
                        <div class="data-inner">
                            <div class="left">
                                <div class="label">maxSurge</div>
                                <div class="value" :title="`${updateData.maxSurge}`"
                                    v-if="updateData.maxSurge !== null && updateData.maxSurge !== undefined">
                                    {{updateData.maxSurge}}
                                </div>
                                <div class="value" v-else>
                                    --
                                </div>
                            </div>
                            <div class="right">
                                <div class="label">minReadySecond</div>
                                <div class="value" :title="`${updateData.minReadySecond}秒`"
                                    v-if="updateData.minReadySecond !== null && updateData.minReadySecond !== undefined">
                                    {{updateData.minReadySecond}}秒
                                </div>
                                <div class="value" v-else>
                                    --
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </bk-sideslider>

    <div title="关闭全屏" @click="cancelFullScreen" class="biz-configuration-instantiation-cancel-fullscreen"
        v-if="editorConfig.fullScreen">
        <i class="bk-icon icon-close"></i>
    </div>
</div>
